<template>
  <div>
      <el-card v-show="showSearch" style="margin-bottom: 20px">
        <el-form :model="queryParams" ref='queryForm' :inline="true" label-width="150px" >
          <el-row :gutter="24">
            <template v-for="item in queryColumnParams.queryColumnList">
              <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <el-form-item :label="item.chineseName+transMark(item.queryType,item.columnType)" :prop="item.columnName">
                  <el-input v-if="item.columnType === 'VARCHAR'"
                            v-model="queryParams[item.columnName]"
                            :placeholder="'请输入'+item.chineseName"
                            clearable
                            size="small"
                            oninput="if(value.length>30)value=value.slice(0,30)"
                            @keyup.enter.native="handleQuery"
                            style="width: 100%"
                  />
                  <el-input v-if="item.columnType === 'INT' && item.queryType !== 'BETWEEN'"
                            v-model="queryParams[item.columnName]"
                            :placeholder="'请输入'+item.chineseName"
                            clearable
                            size="small"
                            oninput="if(value.length>30)value=value.replace(/[^\d]/g,'').slice(0,30)"
                            @keyup.enter.native="handleQuery"
                            style="width: 100%"
                  >
                    <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                  </el-input>
                  <el-input v-if="item.columnType === 'DECIMAL' && item.queryType !== 'BETWEEN'"
                            v-model="queryParams[item.columnName]"
                            :placeholder="'请输入'+item.chineseName"
                            clearable
                            size="small"
                            oninput="if(value.length>30)value=value.replace(/[^0-9.]/g,'').slice(0,30)"
                            @keyup.enter.native="handleQuery"
                            style="width: 100%"
                  >
                    <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                  </el-input>
                  <el-date-picker v-if="item.columnType === 'DATE'" v-model="queryParams[item.columnName]" placeholder="请选择日期"
                                  size="small"
                                  style="width:100%" type="date" value-format="yyyy-MM-dd"
                  />
                  <el-date-picker v-if="item.columnType === 'DATETIME'" v-model="queryParams[item.columnName]" placeholder="请选择时间"
                                  size="small"
                                  style="width:100%" type="month" value-format="yyyy-MM" :picker-options="daterangeOptions"
                  />
                  <el-date-picker
                    v-if="item.columnType === 'DATERANGE'" v-model="queryParams[item.columnName]"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                  <el-select v-if="item.columnType === 'SELECT'" v-model="queryParams[item.columnName]" placeholder="请选择" size="small" style="width: 100%">
                    <el-option
                      v-for="dict in getDict(item.dictName)"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                  <!-- 单位 -->
                  <template v-if="item.queryType === 'BETWEEN'">
                    <el-input v-if="item.columnType === 'INT'"
                              v-model="queryParams[item.columnName + 'Between1']"
                              :placeholder="'请输入'+item.chineseName"
                              clearable
                              size="small"
                              oninput="if(value.length>30)value=value.replace(/[^\d]/g,'').slice(0,30)"
                              @keyup.enter.native="handleQuery"
                              style="width:40%"
                    >
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                    </el-input>
                    <span v-if="item.columnType === 'INT'" class="mo05">  ~  </span>
                    <el-input
                      v-model="queryParams[item.columnName + 'Between2']"
                      :placeholder="'请输入'+item.chineseName"
                      clearable
                      size="small"
                      oninput="if(value.length>30)value=value.replace(/[^\d]/g,'').slice(0,30)"
                      @keyup.enter.native="handleQuery"
                      style="width:40%"
                    >
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                    </el-input>
                    <el-input v-if="item.columnType === 'DECIMAL'"
                              v-model="queryParams[item.columnName + 'Between1']"
                              :placeholder="'请输入'+item.chineseName"
                              clearable
                              size="small"
                              oninput="if(value.length>30)value=value.replace(/[^0-9.]/g,'').slice(0,30)"
                              @keyup.enter.native="handleQuery"
                              style="width:40%"
                    >
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                    </el-input>
                    <span v-if="item.columnType === 'DECIMAL'" class="mo05">  ~  </span>
                    <el-input v-if="item.columnType === 'DECIMAL'"
                              v-model="queryParams[item.columnName + 'Between2']"
                              :placeholder="'请输入'+item.chineseName"
                              clearable
                              size="small"
                              oninput="if(value.length>30)value=value.replace(/[^0-9.]/g,'').slice(0,30)"
                              @keyup.enter.native="handleQuery"
                              style="width:40%"
                    >
                      <i slot="suffix" style="font-style:normal;margin-right: 10px;">{{item.unit?item.unit:""}}</i>
                    </el-input>
                  </template>
                </el-form-item>
              </el-col>
            </template>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-row type="flex" justify="end">
                <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                <el-button type="cyan" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
              </el-row>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button v-if="dataTableParams.addButton"
                       type="primary"
                       icon="el-icon-plus"
                       size="small"
                       @click="addFunc"
                       plain
            >{{dataTableParams.addButtonName}}
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table :data="list" height="calc(100vh - 252px)" highlight-current-row @row-dblclick="rowDblClickable?rowDblClick($event):null">
          <el-table-column v-for="(item,index) in dataTableParams.dataTableColumns" :key="index" :label="item.chineseName"
                           :prop="item.columnName" :min-width="item.width"
          >
            <template slot-scope="scope">
              <div v-if="item.isRealColumn">
                  <span v-if="item.dataTableColumnType === 'SELECT'"
                  >{{ dictLabelFormat(item.dict, scope.row[item.columnName]) }}</span>
                <el-tag v-if="item.dataTableColumnType === 'STATUS'">{{ scope.row[item.columnName] }}</el-tag>
                <attachment v-if="item.type === 'UPLOAD'"
                            :limit="1"
                            :upload-size-limit="150"
                            module-name="上传"
                            :hidden="true"
                            :archive-id="scope.row.id"
                            v-model="scope.row.id"
                            :disabled="true"
                />
                <span v-if="item.dataTableColumnType === 'DATERANGE'">{{scope.row[item.columnName][0] + '至' + scope.row[item.columnName][1]}}</span>
                <span
                  v-if="item.dataTableColumnType === 'NORMAL'"
                >{{ item.format?item.format(scope.row[item.columnName]):scope.row[item.columnName]}}<span>{{item.unit ? item.unit:''}}</span></span>
                <template v-if="item.dataTableColumnType === 'DATE'">
                  <span>{{ parseFormatTime(scope.row[item.columnName], item.dateFormat) }}</span>
                </template>
                <!-- link -->
                <template v-if="item.dataTableColumnType === 'LINK'">
                  <span style="color: #1890ff;cursor: pointer" @click="link(scope.row)">{{ item.format?item.format(scope.row[item.columnName]):scope.row[item.columnName]}}<span>{{item.unit ? item.unit:''}}</span></span>
                </template>
                <template v-if="item.dataTableColumnType === 'STATUS'">
                  <status-value-to-text :row="scope.row" type="highlight"></status-value-to-text>
                </template>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <el-button v-if="dataTableParams.detailButton"
                         :icon="dataTableParams.detailButtonIcon"
                         size="mini"
                         type="text"
                         @click="detailFunc(scope.row)"
              >{{dataTableParams.detailButtonName}}
              </el-button>
              <el-button v-if="dataTableParams.editButton"
                         :icon="dataTableParams.editButtonIcon"
                         size="mini"
                         type="text"
                         @click="editFunc(scope.row)"
                         :class="dataTableParams.editDisabled?'disabled-button':''"
                         :disabled="dataTableParams.editDisabled?dataTableParams.editDisabled(scope.row):false"
              >{{dataTableParams.editButtonName}}
              </el-button>
              <el-button v-if="dataTableParams.deleteButton"
                         :icon="dataTableParams.deleteButtonIcon"
                         size="mini"
                         type="text"
                         @click="deleteFunc(scope.row)"
                         :class="dataTableParams.deleteDisabled?'disabled-button':''"
                         :disabled="dataTableParams.deleteDisabled?dataTableParams.deleteDisabled(scope.row):false"
              >{{dataTableParams.deleteButtonName}}
              </el-button>
              <el-button v-if="dataTableParams.exportButton"
                         :icon="dataTableParams.exportButtonIcon"
                         size="mini"
                         type="text"
                         @click="exportFunc(scope.row)"
                         :class="dataTableParams.deleteDisabled?'disabled-button':''"
                         :disabled="dataTableParams.exportDisabled?dataTableParams.exportDisabled(scope.row):false"
              >{{dataTableParams.exportButtonName}}
              </el-button>
              <el-button v-if="dataTableParams.submitButton"
                         :icon="dataTableParams.submitButtonIcon"
                         size="mini"
                         type="text"
                         @click="submitFunc(scope.row)"
                         :class="dataTableParams.submitDisabled?'disabled-button':''"
                         :disabled="dataTableParams.submitDisabled?dataTableParams.submitDisabled(scope.row):false"
              >{{dataTableParams.exportButtonName}}
              </el-button>
              <template v-for="buttonItem in dataTableParams.extraButtonList">
                <el-button
                  :icon="buttonItem.ButtonIcon"
                  size="mini"
                  type="text"
                  @click="buttonItem.buttonFunc(scope.row)"
                  :class="buttonItem.buttonDisabled?'disabled-button':''"
                  :disabled="buttonItem.buttonDisabled?buttonItem.buttonDisabled(scope.row):false"
                >{{buttonItem.buttonName}}
                  <!--@click="doButton(scope.row,buttonItem.buttonFunc)" -->
                </el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-card>
  </div>
</template>

<script>
import Attachment from '@/components/ScAttachment'
import { parseTime } from '@/utils/ruoyi'
export default {
  name: 'DrDataTable',
  components: {Attachment},
  props:{
    dataTableParams: {
      type: Object,
      default: null
    },
    queryColumnParams: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      //页面参数
      queryColumnList:[],
      daterangeOptions:{
        disabledDate (time) {
          // 禁用以后的时间
          return time.getTime() > Date.now() - 8.64e6
        },
      },
      dictMap:{},
      //表格
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 状态数据字典
      // statusOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      dictOptionsMap:{}
    }
  },
  created() {
    for(let i in this.dataTableParams.dataTableColumns) {
      if(this.dataTableParams.dataTableColumns[i].dataTableColumnType === 'SELECT') {
        this.getDicts(this.dataTableParams.dataTableColumns[i].dict).then(response => {
          this.dictOptionsMap[this.dataTableParams.dataTableColumns[i].dict] = response.data
        })
      }
    }
    this.getList()
  },
  methods: {
    link(row) {
      this.$emit('showDetail',row);
    },
    addFunc() {
      this.$emit('showEdit',true);
    },
    editFunc(row) {
      this.$emit('showEdit',false, row);
    },
    detailFunc(row) {
      this.$emit('showDetail',row);
    },
    deleteFunc(row) {
      this.$emit('delete',row);
    },
    submitFunc(row) {
      this.$emit('submit',row);
    },
    exportFunc(row) {
      this.$emit('export',row);
    },
    /** 查询角色列表 */
    getList() {
      this.$emit('list',this.queryParams);
    },
    dictLabelFormat(options, selectedValue) {
      if(this.dictOptionsMap[options]) {
        return this.selectDictLabel(this.dictOptionsMap[options], selectedValue)
      }
    },
    rowDblClick(row) {
      this.showDetail(row)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const name = row.name
      this.$confirm('是否确认删除客户名称为"' + name + '"的数据项?', '警告', {
       // confirmButtonText: '确定',
       // cancelButtonText: '取消',
        //type: 'warning'
      }).then(function() {
        //return delClientBase(row.id)
      }).then(() => {
      //  this.getList()
       // this.msgSuccess('删除成功')
      }).catch(function () {
      })
    },
    /** 导出按钮操作 */
    getexport(id){

    },
    doFormat(data, func) {
      if(func) {
        let returnData = ''
        eval(func)
        return returnData
      } else{
        return data
      }
    },
    doLink(data, func) {
      eval(func)
    },
    doButton(row, func) {
      eval(func)
    },
    parseFormatTime(data, format) {
      return parseTime(data, format)
    },
    //搜索
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    transMark(queryType,columnType) {
      let returnValue = "";
      let flag = columnType === 'DATE' || columnType === 'DATERANGE' || columnType === 'DATETIME'
      switch (queryType)
      {
        case "gt":returnValue=flag?"  晚于":"  大于";
          break;
        case "ge":returnValue=flag?"  不早于":"  大于或等于";
          break;
        case "lt":returnValue=flag?"  早于":"  小于";
          break;
        case "le":returnValue=flag?"  不晚于":"  小于或等于";
          break;
        default:
          returnValue="";
      }
      return returnValue;
    },
    getDict(dictName){
      if(this.dictMap[dictName]) {
        return this.dictMap[dictName];
      }
      this.getDicts(dictName).then((response) => {
        this.dictMap[dictName] = response.data
        return this.dictMap[dictName];
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 100%;
  display: flex;
}
</style>
<style lang="scss">
.el-form-item--medium {
  .el-form-item__content {
    flex: 1;
  }
}
</style>
